<template>
  <div class="container">
    <h1>文章列表</h1>

    <table border="1">
      <tr>
        <th>ID</th>
        <th>标题</th>
        <th>内容</th>
        <th>图片</th>
      </tr>
      <tr v-for="art in articleList">
        <td>{{art.id}}</td>
        <td>{{art.title}}</td>
        <td>{{art.content}}</td>
        <td><img :src="art.imgUrls[0]" width="50" height="50"></td>
      </tr>
    </table>

    <hr>
  </div>
</template>
<script setup>
import { onMounted,ref } from "vue";

    const articleList = ref([]);

    //查询数据的函数
    onMounted(() => {
        fetch("http://localhost:8080/student/findAll")
             .then( res => res.json())
             .then( res => articleList.value = res)
    })
</script>
<style scoped>
.container{
    text-align: center;
}
    table{
        border-collapse: collapse;
        border: 1px solid rgb(8, 8, 8);
    }

</style>
